<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Catbook</title>
    <style>
      .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      /* 
    * {
      box-sizing: border-box;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
    } */

      a,
      a:visited,
      a:hover,
      a:active {
        color: inherit;
        text-decoration: none;
      }
      .outer-menu {
        position: fixed;
        top: 15vh;
        /* top: 0; */
        left: 0;
        z-index: 1;
      }

      .outer-menu .checkbox-toggle {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        cursor: pointer;
        width: 60px;
        height: 60px;
        opacity: 0;
      }

      .outer-menu .checkbox-toggle:checked + .hamburger > div {
        transform: rotate(135deg);
      }

      .outer-menu .checkbox-toggle:checked + .hamburger > div:before,
      .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
        top: 0;
        transform: rotate(90deg);
      }

      .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
        opacity: 0;
      }

      .outer-menu .checkbox-toggle:checked ~ .menu {
        pointer-events: auto;
        visibility: visible;
      }

      .outer-menu .checkbox-toggle:checked ~ .menu > div {
        transform: scale(1);
        transition-duration: 0.75s;
      }

      .outer-menu .checkbox-toggle:checked ~ .menu > div > div {
        opacity: 1;
        transition: opacity 0.4s ease 0.4s;
      }

      .outer-menu .checkbox-toggle:hover + .hamburger {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
      }

      .outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
        transform: rotate(225deg);
      }

      .outer-menu .hamburger {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 60px;
        height: 60px;
        padding: 0.5em 1em;
        background: #3498db;
        border-radius: 0 0.12em 0.12em 0;
        cursor: pointer;
        transition: box-shadow 0.4s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .outer-menu .hamburger > div {
        position: relative;
        flex: none;
        width: 100%;
        height: 2px;
        background: #fefefe;
        transition: all 0.4s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .outer-menu .hamburger > div:before,
      .outer-menu .hamburger > div:after {
        content: "";
        position: absolute;
        z-index: 1;
        top: -10px;
        left: 0;
        width: 100%;
        height: 2px;
        background: inherit;
        transition: all 0.4s ease;
      }

      .outer-menu .hamburger > div:after {
        top: 10px;
      }

      .outer-menu .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        visibility: hidden;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        outline: 1px solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .outer-menu .menu > div {
        width: 200vw;
        height: 200vw;
        color: #fefefe;
        background: #3498db;
        border-radius: 50%;
        transition: all 0.4s ease;
        flex: none;
        transform: scale(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .outer-menu .menu > div > div {
        text-align: center;
        max-width: 90vw;
        max-height: 100vh;
        opacity: 0;
        transition: opacity 0.4s ease;
        overflow-y: auto;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .outer-menu .menu > div > div > ul {
        list-style: none;
        padding: 0 1em;
        margin: 0;
        display: block;
        max-height: 100vh;
      }

      .outer-menu .menu > div > div > ul > li {
        padding: 0;
        margin: 1em;
        font-size: 24px;
        display: block;
      }

      .outer-menu .menu > div > div > ul > li > a {
        position: relative;
        display: inline;
        cursor: pointer;
        transition: color 0.4s ease;
      }

      .outer-menu .menu > div > div > ul > li > a:hover {
        color: #e5e5e5;
      }

      .outer-menu .menu > div > div > ul > li > a:hover:after {
        width: 100%;
      }

      .outer-menu .menu > div > div > ul > li > a:after {
        content: "";
        position: absolute;
        z-index: 1;
        bottom: -0.15em;
        left: 0;
        width: 0;
        height: 2px;
        background: #e5e5e5;
        transition: width 0.4s ease;
      }

      .outer-menu {
        z-index: 999;
      }
      * {
        box-sizing: border-box;
      }

      *:focus {
        outline: none;
      }

      body {
        font-family: Arial;
        background-color: #3498db;
        padding: 150px;
      }

      .login {
        margin: 20px auto;
        width: 300px;
      }

      .login-screen {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
      }

      .app-title {
        text-align: center;
        color: #777;
      }

      .login-form {
        text-align: center;
      }

      .control-group {
        margin-bottom: 10px;
      }

      input {
        text-align: center;
        background-color: #ecf0f1;
        border: 2px solid transparent;
        border-radius: 3px;
        font-size: 16px;
        font-weight: 200;
        padding: 10px 0;
        width: 250px;
        transition: border 0.5s;
      }

      input:focus {
        border: 2px solid #3498db;
        box-shadow: none;
      }

      .btn {
        border: 2px solid transparent;
        background: #3498db;
        color: #ffffff;
        font-size: 16px;
        line-height: 25px;
        padding: 10px 0;
        text-decoration: none;
        text-shadow: none;
        border-radius: 3px;
        box-shadow: none;
        transition: 0.25s;
        display: block;
        width: 250px;
        margin: 0 auto;
      }

      .btn:hover {
        background-color: #2980b9;
      }

      .login-link {
        font-size: 12px;
        color: rgb(163, 159, 159);
        display: block;
        margin-top: 12px;
        text-decoration: none;
      }

      .login-link:hover {
        color: rgb(0, 0, 0);
        transition: 0.5s;
      }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      function cansub() {
        return false;
      }
    </script>
  </head>
  <div class="outer-menu">
    <input class="checkbox-toggle" type="checkbox" />
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="/home.html">首页</a></li>
            <li><a href="/upload.html">上传</a></li>
            <li><a href="/login.html">登录</a></li>
            <li><a href="/regis.html">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <body>
    <div class="login">
      <div class="login-screen">
        <div class="app-title">
          <h1>登录</h1>
        </div>
        <form action="" id="form1" onsubmit="return cansub()">
          <div class="login-form">
            <div class="control-group">
              <input
                type="text"
                class="login-field"
                name="telephone"
                value=""
                placeholder="手机号"
                id="login-number"
              />
              <label
                class="login-field-icon fui-user"
                for="login-number"
              ></label>
            </div>

            <div class="control-group">
              <input
                type="password"
                name="password"
                class="login-field"
                value=""
                placeholder="密码"
                id="login-pass"
              />
              <label class="login-field-icon fui-lock" for="login-pass"></label>
            </div>
            <input
              type="submit"
              class="btn btn-primary btn-large btn-block"
              value="登录"
              id="loginbtn"
            />
            <a class="login-link" href="./regis.html">立即注册</a>
          </div>
        </form>
      </div>
    </div>
    <script src="./js/axios.min.js"></script>
    <script>
      loginbtn.onclick = function () {
        var inputval = document.getElementById("login-number").value;
        var passval = document.getElementById("login-pass").value;
        axios
          .post("http://120.77.221.202:1016/api/auth/login", {
            telephone: inputval,
            password: passval,
          })
          .then(function (response) {
            console.log(response.data);
            alert(response.data.msg);
            console.log(response.data.data.token);
            window.localStorage.setItem("token", response.data.data.token); //保存到cookie中
            // var token = window.localStorage.getItem("token");
            // console.log(token);
            window.location.href = "./home.html";
          })
          .catch(function (error) {
            console.log(error.response.data.msg);
            alert(error.response.data.msg);
          });
      };
    </script>
  </body>
</html>
